<template>
  <div>
    <div>
      <el-menu
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-menu-item index="2">商品上架</el-menu-item>


      </el-menu>
    </div>


    <div style="margin-top:60px">
      <el-table
          :data="tableData"
          border
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%">
        <el-table-column
            fixed
            prop="productName"
            label="商品名"
            width="200">
        </el-table-column>
        <el-table-column
            prop="productId"
            label="商品编号"
            width="220">
        </el-table-column>
        <el-table-column
            prop="productType"
            label="商品类型"
            width="220">
        </el-table-column>
        <el-table-column
            prop="productShortDescription"
            label="商品描述"
            width="300">
        </el-table-column>
        <el-table-column
            prop="productSales"
            label="商品销量"
            width="180">
        </el-table-column>
        <el-table-column
            prop="productStatus"
            label="商品状态"
            width="220">
        </el-table-column>
        <el-table-column
            prop="productBeauty"
            label="商品美化状态"
            width="180">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="180">
          <template>
            <el-button @click="dialogFormVisible = true" type="text" size="small">上架</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="商品美化信息" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules">
          <el-form-item label="商品编号" :label-width="formLabelWidth">
            {{form.id}}
          </el-form-item>
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            {{form.name}}
          </el-form-item>
          <el-form-item label="商品类型" :label-width="formLabelWidth">
            {{form.type}}
          </el-form-item>
          <el-form-item label="商品销量" :label-width="formLabelWidth">
            {{form.sales}}
          </el-form-item>
          <el-form-item label="简短类型" :label-width="formLabelWidth">
            {{form.productShortDescription}}
          </el-form-item>

          <el-form-item label="商品描述" :label-width="formLabelWidth">
            <el-input v-model="form.info" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品售价" :label-width="formLabelWidth" prop="money">
            <el-input v-model="form.money"></el-input>
          </el-form-item>
          <el-form-item label="商品图片" :label-width="formLabelWidth">
            <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-change="photoToStr">

              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
    </div>


  </div>

</template>

<script>
export default {
  data() {

    return {
      currentRow: null,
      tableData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        info: "",
        money: "",
        type:"",
        id:"",
        productShortDescription:"",
        name:"",
        sales:"",
      },
      formLabelWidth: '120px',
      dialogImageUrl: '',
      dialogVisible: false,
      fileList:[],
      rules: {
        money: [
          { required: true, message: '请输入金额', trigger: 'blur' },
          { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确额格式,可保留两位小数' }
        ]
      }

    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleRemove(file, fileList) {
      this.fileList=fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      this.form.type=this.currentRow.productType
      this.form.id=this.currentRow.productId
      this.form.productShortDescription=this.currentRow.productShortDescription
      this.form.name=this.currentRow.productName
      this.form.sales=this.currentRow.productSales
    },
    photoToStr(file, fileList){
      this.fileList=fileList;
      // var reader = new FileReader();
      // reader.readAsDataURL(file.raw);
      // reader.onload = () => {
      //   // console.log("file 转 base64结果:" + reader.result);
      //   this.userCertPhoto = reader.result
      // };
      // reader.onerror = function(error) {
      //   console.log("Error: ", error);
      // };
    },
    add(){
      let fd=new FormData()
      fd.append("productId",this.form.id)
      fd.append("productName",this.form.name)
      fd.append("productType",this.form.type)
      fd.append("productSales",this.form.sales)
      fd.append("productPrice",this.form.money*100)
      fd.append("productShortDescription",this.form.productShortDescription)
      fd.append("productInfo",this.form.info)
      this.$axios.post("/api/product/addProduct",fd)
      this.dialogFormVisible = false
      for(let f of this.fileList){
        const reader = new FileReader();
        reader.readAsDataURL(f.raw);
        reader.onload = () => {
          let r=reader.result
          // console.log("file 转 base64结果:"+f.url +r );
          let fd=new FormData()
          fd.append("photo",r)
          fd.append("productId",this.form.id)
          this.$axios.post("/api/photo/addPhoto",fd)
        };
      }
      this.fileList=[]
      this.form.money=""
      this.form.info=""
    }
  },
  created() {
    this.$axios.get("/api/product/showToManager").then(r => {
      for (let p of r.data) {
        if (p.productStatus == 1) {
          p.productStatus = "未上架"
        } else {
          p.productStatus = "已上架"
        }
        if (p.productBeauty == 1) {
          p.productBeauty = "未美化"
        } else {
          p.productBeauty = "已美化"
        }
      }
      this.tableData = r.data
      console.log(this.tableData)
    })
  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 320px;
  height: 300px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>